<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>我的托福人</title>
    <link th:href="@{/css/base.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/toefl.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <script th:src="@{/js/jquery-2.1.0.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/js/publicClass.js}" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div class="">
    <div class="flcb_cardMenu" style="position: relative;">
        <p id="area" text="myclass"></p>
        <ul>
            <li class="on">
                <a href="###" id="myclass">我关注的文章</a>
            </li>
            <li>
                <a href="###" id="newclass">最近发布文章</a>
            </li>
            <li>
                <a href="###" id="desc">我发布的文章</a>
            </li>
        </ul>

        <div style="position: absolute;right: 10px;">
            <button type="button" class="btn btn-success " onclick="window.location.href='../托福人/托福人发布页.html'">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 发布
            </button>
        </div>

    </div>

    <div id="myclassContent">
        <div class="publiclass">
            <dl>
                <a href="../托福人/托福人详情页.html" target="_parent">
                    <dt><img src="../img/400x240.png"></dt>
                    <dd>
                        <div class="tfr_classifyh3">
                            <h3>托福口语5个技巧带你入门</h3>
                            <div><a href="###" class="imgA"><img class="img" src="../img/125x125.jpg"/> alex</a></div>
                        </div>
                        <div class="tfr_classifyText">
                            对于很多打算考托福的同学来说，该如何准备托福口语是个很困扰的问题。其实，利用OG，分析录音，活用托福听力材料等技巧能让考生轻松入门。好好学托福名师为大家总结了5个入门技巧，让更多的同学更有效率的备考。
                        </div>
                        <div class="tfr_classifyTime">
                            <span>所属分类:</span><a href="###">听力</a>
                            <span>发布日期：</span><span>2019-12-12</span>
                            <div class="commDiv">
                                <span class="glyphicon glyphicon-heart" style="color: #D92A11;"></span> <span>100</span>
                                <span class="glyphicon glyphicon-user" style="color: #388BFF;"></span><span>20</span>
                            </div>

                        </div>

                    </dd>
                </a>

            </dl>
            <dl>
                <a href="../托福人/托福人详情页.html" target="_parent">
                    <dt><img src="../img/400x240.png"></dt>
                    <dd>
                        <div class="tfr_classifyh3">
                            <h3>托福口语5个技巧带你入门</h3>
                            <div><a href="###" class="imgA"><img class="img" src="../img/125x125.jpg"/> alex</a></div>
                        </div>
                        <div class="tfr_classifyText">
                            对于很多打算考托福的同学来说，该如何准备托福口语是个很困扰的问题。其实，利用OG，分析录音，活用托福听力材料等技巧能让考生轻松入门。好好学托福名师为大家总结了5个入门技巧，让更多的同学更有效率的备考。
                        </div>
                        <div class="tfr_classifyTime">
                            <span>所属分类:</span><a href="###">听力</a>
                            <span>发布日期：</span><span>2019-12-12</span>
                            <div class="commDiv">
                                <span class="glyphicon glyphicon-heart" style="color: #D92A11;"></span> <span>100</span>
                                <span class="glyphicon glyphicon-user" style="color: #388BFF;"></span><span>20</span>
                            </div>

                        </div>

                    </dd>
                </a>

            </dl>
            <dl>
                <a href="../托福人/托福人详情页.html" target="_parent">
                    <dt><img src="../img/400x240.png"></dt>
                    <dd>
                        <div class="tfr_classifyh3">
                            <h3>托福口语5个技巧带你入门</h3>
                            <div><a href="###" class="imgA"><img class="img" src="../img/125x125.jpg"/> alex</a></div>
                        </div>
                        <div class="tfr_classifyText">
                            对于很多打算考托福的同学来说，该如何准备托福口语是个很困扰的问题。其实，利用OG，分析录音，活用托福听力材料等技巧能让考生轻松入门。好好学托福名师为大家总结了5个入门技巧，让更多的同学更有效率的备考。
                        </div>
                        <div class="tfr_classifyTime">
                            <span>所属分类:</span><a href="###">听力</a>
                            <span>发布日期：</span><span>2019-12-12</span>
                            <div class="commDiv">
                                <span class="glyphicon glyphicon-heart" style="color: #D92A11;"></span> <span>100</span>
                                <span class="glyphicon glyphicon-user" style="color: #388BFF;"></span><span>20</span>
                            </div>

                        </div>

                    </dd>
                </a>

            </dl>

        </div>
        <div class="pageList">
            <ul>
                <li><span>1</span></li>
                <li>
                    <a href="###">2</a>
                </li>
                <li>
                    <a href="###">3</a>
                </li>
                <li>
                    <a href="###">4</a>
                </li>
                <li>
                    <a href="###">5</a>
                </li>
                <li>
                    <a href="###">最后一页</a>
                </li>
                <li>
                    <a href="###" class="pret">上一页</a>
                </li>
                <li>
                    <a href="###" class="next">下一页</a>
                </li>
            </ul>
        </div>

    </div>

    <div id="newclassContent" style="display: none;">
        <div class="publiclass">
            <!--            <dl>
                            <a href="../托福人/托福人详情页.html" target="_parent">
                                <dt><img src="../img/400x240.png"></dt>
                                <dd>
                                    <div class="tfr_classifyh3">
                                        <h3>托福口语5个技巧带你入门</h3>
                                        <div><a href="###" class="imgA"><img class="img" src="../img/125x125.jpg"/> alex</a></div>
                                    </div>
                                    <div class="tfr_classifyText">
                                        对于很多打算考托福的同学来说，该如何准备托福口语是个很困扰的问题。其实，利用OG，分析录音，活用托福听力材料等技巧能让考生轻松入门。好好学托福名师为大家总结了5个入门技巧，让更多的同学更有效率的备考。
                                    </div>
                                    <div class="tfr_classifyTime">
                                        <span>所属分类:</span><a href="###">听力</a>
                                        <span>发布日期：</span><span>2019-12-12</span>
                                        <div class="commDiv">
                                            <span class="glyphicon glyphicon-heart" style="color: #D92A11;"></span> <span>100</span>
                                            <span class="glyphicon glyphicon-user" style="color: #388BFF;"></span><span>20</span>
                                        </div>

                                    </div>

                                </dd>
                            </a>
                        </dl>
                        <dl>
                            <a href="../托福人/托福人详情页.html" target="_parent">
                                <dt><img src="../img/400x240.png"></dt>
                                <dd>
                                    <div class="tfr_classifyh3">
                                        <h3>托福口语5个技巧带你入门</h3>
                                        <div><a href="###" class="imgA"><img class="img" src="../img/125x125.jpg"/> alex</a></div>
                                    </div>
                                    <div class="tfr_classifyText">
                                        对于很多打算考托福的同学来说，该如何准备托福口语是个很困扰的问题。其实，利用OG，分析录音，活用托福听力材料等技巧能让考生轻松入门。好好学托福名师为大家总结了5个入门技巧，让更多的同学更有效率的备考。
                                    </div>
                                    <div class="tfr_classifyTime">
                                        <span>所属分类:</span><a href="###">听力</a>
                                        <span>发布日期：</span><span>2019-12-12</span>
                                        <div class="commDiv">
                                            <span class="glyphicon glyphicon-heart" style="color: #D92A11;"></span> <span>100</span>
                                            <span class="glyphicon glyphicon-user" style="color: #388BFF;"></span><span>20</span>
                                        </div>

                                    </div>

                                </dd>
                            </a>

                        </dl>-->
            <form th:action="@{/article/myArticle}" method="post"></form>
            <dl th:each="article,iterStat : ${page.list}" stat>
                <a href="../托福人/托福人详情页.html" target="_parent">
                    <dt><img src="../img/400x240.png"></dt>
                    <dd>
                        <div class="tfr_classifyh3">
                            <h3 th:text="${article.artTitle}">托福口语5个技巧带你入门</h3>
                            <div><a href="###" class="imgA"><img class="img" src="../img/125x125.jpg"/> alex</a></div>
                        </div>
                        <div class="tfr_classifyText">
                            <p th:text="${article.artText}"></p>
                        </div>
                        <div class="tfr_classifyTime">
                            <span>所属分类:</span><a name="articleType" th:text="${article.artType}" href="###">听力</a>
                            <span>发布日期：</span><span th:text="${article.artDate}">2019-12-12</span>
                            <div class=" commDiv">
                                <span class="glyphicon glyphicon-heart" style="color: #D92A11;"></span> <span>100</span>
                                <span class="glyphicon glyphicon-user" style="color: #388BFF;"></span><span>20</span>
                            </div>
                        </div>
                    </dd>
                </a>
            </dl>
        </div>

        <!--<div class="pageList">
            <ul>
                <li><span>1</span></li>
                <li>
                    <a href="###">2</a>
                </li>
                <li>
                    <a href="###">3</a>
                </li>
                <li>
                    <a href="###">4</a>
                </li>
                <li>
                    <a href="###">5</a>
                </li>
                <li>
                    <a href="###">最后一页</a>
                </li>
                <li>
                    <a href="###" class="pret">上一页</a>
                </li>
                <li>
                    <a href="###" class="next">下一页</a>
                </li>
            </ul>
        </div>-->
        <div class="pageList">
            <ul>
                <li> 共[[${page.total}]]条,
                    <span th:if="${ ( page.pageNum - 1 ) * page.pageSize + 1 == page.total }">
			        当前显示第[[${page.total}]]条,
	                </span></li>
                <li>
                    <span th:if="${ ( page.pageNum - 1 ) * page.pageSize + 1 != page.total }">
			        当前显示[[${page.startRow}]]-[[${page.endRow}]]条,
	                </span>
                </li>
                <li>
                    第[[${page.pageNum}]]/[[${page.pages}]]页
                </li>
                <li>
                    <a href="#" th:if="${page.pageNum > 1}"><span class="linkspan" id="one">首页</span>&nbsp;</a>
                </li>
                <li>
                    <a href="#" th:if="${page.pageNum > 1}"><span class="linkspan" id="two">上一页</span>&nbsp;</a>
                </li>
                <li>
                    <a href="#" th:if="${page.pageNum < page.pages}"><span class="linkspan" id="three">下一页</span>&nbsp;</a>
                </li>
                <li>
                    <a href="#" th:if="${page.pageNum != page.pages}"><span class="linkspan"
                                                                            id="four">末页</span>&nbsp;</a>
                </li>
                <li>
                    到<input type="text" id="pageNo" size=4 style="text-align:right;" onkeypress="onlynumber();"/> 页
                    <button class="linkspan" id="five" style="color:black;text-decoration:none;"> 跳 转</button>
                </li>
            </ul>
        </div>

        <div id="pageInfo">
            共[[${page.total}]]条,
            <span th:if="${ ( page.pageNum - 1 ) * page.pageSize + 1 == page.total }">
			当前显示第[[${page.total}]]条,
	</span>
            <span th:if="${ ( page.pageNum - 1 ) * page.pageSize + 1 != page.total }">
			当前显示[[${page.startRow}]]-[[${page.endRow}]]条,
	</span>
            第[[${page.pageNum}]]/[[${page.pages}]]页
            |
            <a href="#" th:if="${page.pageNum > 1}"><span class="linkspan" id="one">首页</span>&nbsp;</a>
            <a href="#" th:if="${page.pageNum > 1}"><span class="linkspan" id="two">上一页</span>&nbsp;</a>
            <a href="#" th:if="${page.pageNum < page.pages}"><span class="linkspan" id="three">下一页</span>&nbsp;</a>
            <a href="#" th:if="${page.pageNum != page.pages}"><span class="linkspan" id="four">末页</span>&nbsp;</a>
            |
            到<input type="text" id="pageNo" size=4 style="text-align:right;" onkeypress="onlynumber();"/> 页
            <button class="linkspan" id="five" style="color:black;text-decoration:none;"> 跳 转</button>
        </div>


    </div>

    <div id="descContent" style="display: none;">
        <div class="publiclass">
            <dl>
                <a href="../托福人/托福人详情页.html" target="_parent">
                    <dt><img src="../img/400x240.png"></dt>
                    <dd>
                        <div class="tfr_classifyh3">
                            <h3>托福口语5个技巧带你入门</h3>
                            <div><a href="###" class="imgA"><img class="img" src="../img/125x125.jpg"/> alex</a></div>
                        </div>
                        <div class="tfr_classifyText">
                            对于很多打算考托福的同学来说，该如何准备托福口语是个很困扰的问题。其实，利用OG，分析录音，活用托福听力材料等技巧能让考生轻松入门。好好学托福名师为大家总结了5个入门技巧，让更多的同学更有效率的备考。
                        </div>
                        <div class="tfr_classifyTime">
                            <span>所属分类:</span><a href="###">听力</a>
                            <span>发布日期：</span><span>2019-12-12</span>
                            <div class="commDiv">
                                <span class="glyphicon glyphicon-heart" style="color: #D92A11;"></span> <span>100</span>
                                <span class="glyphicon glyphicon-user" style="color: #388BFF;"></span><span>20</span>
                            </div>

                        </div>

                    </dd>
                </a>

            </dl>
            <dl>
                <a href="../托福人/托福人详情页.html" target="_parent">
                    <dt><img src="../img/400x240.png"></dt>
                    <dd>
                        <div class="tfr_classifyh3">
                            <h3>托福口语5个技巧带你入门</h3>
                            <div><a href="###" class="imgA"><img class="img" src="../img/125x125.jpg"/> alex</a></div>
                        </div>
                        <div class="tfr_classifyText">
                            对于很多打算考托福的同学来说，该如何准备托福口语是个很困扰的问题。其实，利用OG，分析录音，活用托福听力材料等技巧能让考生轻松入门。好好学托福名师为大家总结了5个入门技巧，让更多的同学更有效率的备考。
                        </div>
                        <div class="tfr_classifyTime">
                            <span>所属分类:</span><a href="###">听力</a>
                            <span>发布日期：</span><span>2019-12-12</span>
                            <a href="###" style="margin-left: 40px;"> 删除</a>
                            <a href="../托福人/托福人发布页.html"> 编辑</a>
                            <div class="commDiv">
                                <span class="glyphicon glyphicon-heart" style="color: #D92A11;"></span> <span>100</span>
                                <span class="glyphicon glyphicon-user" style="color: #388BFF;"></span><span>20</span>
                            </div>

                        </div>

                    </dd>
                </a>

            </dl>
            <div class="pageList">
                <ul>
                    <li><span>1</span></li>
                    <li>
                        <a href="###">2</a>
                    </li>
                    <li>
                        <a href="###">3</a>
                    </li>
                    <li>
                        <a href="###">4</a>
                    </li>
                    <li>
                        <a href="###">5</a>
                    </li>
                    <li>
                        <a href="###">最后一页</a>
                    </li>
                    <li>
                        <a href="###" class="pret">上一页</a>
                    </li>
                    <li>
                        <a href="###" class="next">下一页</a>
                    </li>
                </ul>
            </div>
        </div>

    </div>

</div>

<script>
    // articleType 转换
    var articleType = document.getElementsByName("articleType");
    for (var i = 0; i < articleType.length; i++) {
        if (articleType[i].text === "0") {
            articleType[i].text = "js 听力"
        }
    }

</script>
<script type="text/javascript" th:src="@{/js/jquery-3.1.1.min.js}"></script>
<script th:inline="javascript">
    $(function () {
        //删除操作
        $(".delete").click(function () {
            var href = $(this).attr("href");
            if (confirm("确定要删除吗?")) {
                $("form:eq(0)").attr("action", href).submit();
                return false;
            }

        });

        $(".update").click(function () {
            var href = $(this).attr("href");
            $(location).attr("href", href);
        });

        //分页操作
        $(".linkspan").click(function () {

            var pageNo = [[${page.pageNum}]];
            var totalPageNum = [[${page.pages}]];
            var re = /^[0-9]+.?[0-9]*$/;

            if (String($(this).attr("id")) == String("one"))
                pageNo = 1;

            if (String($(this).attr("id")) == String("two"))
                pageNo = pageNo - 1;

            if (String($(this).attr("id")) == String("three"))
                pageNo = pageNo + 1;

            if (String($(this).attr("id")) == String("four"))
                pageNo = totalPageNum;

            if (String($(this).attr("id")) == String("five")) {
                var num = $.trim($("#pageNo").val());

                if (!re.test(num)) {
                    alert("输入的不是数字!");
                    return;
                }
                pageNo = parseInt(num);
                if (pageNo < 1 || pageNo > totalPageNum) {
                    alert("页号超出范围，有效范围：[1-" + totalPageNum + "]!");
                    return;
                }

            }

            var act = "?pageNo=" + pageNo;
            $("form:eq(1)").attr("action", act).submit();
            return false;

        });
    });

</script>

</body>

</html>